const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
    mode:'development',
    entry:'./src/index.js',

    devServer:{
        historyApiFallback:true,
    },
    resolve:{
        // 默认扩展名
        extensions:['.js','.jsx'],

        // 路径别名
        alias:{
            '@':path.join(__dirname,'./src'),
            // '@':path.resolve('./src'),
        }
    },
    module:{
        rules:[
            // JSX -> React.createElement()
            {
                test:/\.jsx?$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        // 插件集合
                        presets:['@babel/preset-react'],

                        plugins:[
                            // 解决类组件中使用箭头函数定义但浏览器不支持的问题
                           //'@babel/plugin-proposal-class-properties',
                           ['@babel/plugin-proposal-decorators', { "legacy": true }]
                        ]
                    }
                },
                include:path.join(__dirname,'src'),
                // exclude:path.reolve('./node_modules')
            },

            // css
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    },

    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/template.html',
            title:'react项目'
        })
    ]
}